<template>
  <div class="login-bg">
    <div class="bg-deco bg-deco-tl"></div>
    <div class="bg-deco bg-deco-tl2"></div>
    <div class="bg-deco bg-deco-tl3"></div>
    <div class="bg-deco bg-deco-tr"></div>
    <div class="bg-deco bg-deco-bl"></div>
    <div class="bg-deco bg-deco-br"></div>
    <div class="bg-deco bg-deco-br2"></div>
    <div class="login-container">
      <div class="login-title">万青管家服务平台</div>
      <div class="login-subtitle">让家政服务更高效、更智能</div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="auto" class="login-form">
        <el-form-item prop="username">
          <el-input
            :prefix-icon="User"
            v-model="form.username"
            placeholder="请输入账号"
            size="large"
            @keyup.enter="onSubmit"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            v-model="form.password"
            placeholder="请输入密码"
            size="large"
            type="password"
            @keyup.enter="onSubmit"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            class="login-btn"
            size="large"
            round
            block
            :loading="loading"
            :disabled="loading"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login-copyright">© 2024 万青管家服务平台</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { login } from '@/api/auth'
import config from '@/utils/config'

const form = ref({
  username: '',
  password: '',
})

const formRef = ref()
const loading = ref(false)
const router = useRouter()

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
  ],
}

const onSubmit = async () => {
  if (!formRef.value) return

  try {
    // 表单验证
    await formRef.value.validate()

    loading.value = true

    // 调用登录API
    const res = await login({
      username: form.value.username,
      password: form.value.password,
      name: 'admin',
    })

    // 登录成功，保存token和管理员信息
    localStorage.setItem('token', res.data.token)
    localStorage.setItem('isLogin', 'true')
    localStorage.setItem('username', res.data.admin.username)
    localStorage.setItem('adminInfo', JSON.stringify(res.data.admin))

    ElMessage.success('登录成功')

    // 跳转到管理页面
    router.push('/admin/orders')
  } catch (error) {
    // 错误已在请求拦截器中处理，这里不需要重复显示
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bg-deco {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.bg-deco-tl {
  width: 340px;
  height: 340px;
  left: -120px;
  top: -120px;
  background: radial-gradient(circle at 60% 40%, #42a5f5 60%, #1976d2 100%);
  opacity: 0.22;
}
.bg-deco-tl2 {
  width: 120px;
  height: 120px;
  left: 120px;
  top: 60px;
  background: radial-gradient(circle at 60% 40%, #90caf9 60%, #42a5f5 100%);
  opacity: 0.13;
}
.bg-deco-tl3 {
  width: 60px;
  height: 60px;
  left: 260px;
  top: 180px;
  background: radial-gradient(circle at 60% 40%, #e3f2fd 60%, #42a5f5 100%);
  opacity: 0.1;
}
.bg-deco-tr {
  width: 180px;
  height: 180px;
  right: 60px;
  top: 40px;
  background: radial-gradient(circle at 60% 40%, #bbdefb 60%, #2196f3 100%);
  opacity: 0.12;
}
.bg-deco-bl {
  width: 120px;
  height: 120px;
  left: 40px;
  bottom: 60px;
  background: radial-gradient(circle at 60% 40%, #90caf9 60%, #1976d2 100%);
  opacity: 0.1;
}
.bg-deco-br {
  width: 260px;
  height: 260px;
  right: -100px;
  bottom: -100px;
  background: radial-gradient(circle at 40% 60%, #90caf9 60%, #1976d2 100%);
  opacity: 0.18;
}
.bg-deco-br2 {
  width: 80px;
  height: 80px;
  right: 180px;
  bottom: 120px;
  background: radial-gradient(circle at 40% 60%, #e3f2fd 60%, #2196f3 100%);
  opacity: 0.1;
}
.login-container {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 48px 0 rgba(25, 118, 210, 0.18);
  padding: 54px 44px 36px 44px;
  min-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  position: relative;
}
.login-title {
  font-size: 2.1rem;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 12px;
  letter-spacing: 2px;
  text-align: center;
}
.login-subtitle {
  font-size: 1.1rem;
  color: #2196f3;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: 1px;
  opacity: 0.85;
}
.login-form {
  width: 100%;
}
.login-btn {
  width: 100%;
  background: linear-gradient(90deg, #1976d2 0%, #2196f3 100%);
  border: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px #1976d220;
  transition: background 0.3s;
}
.login-btn:hover {
  background: linear-gradient(90deg, #1565c0 0%, #1e88e5 100%);
}
.login-copyright {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100vw;
  text-align: center;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.7;
  z-index: 2;
}
</style>
